<template>
  <div class="app-container">

    <div class="filter-container">

      <el-date-picker
        v-model="listQuery.play_time_arr"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="播发开始日期"
        end-placeholder="播发结束日期"
        placeholder="选择播放时间"/>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="loadDataList(true)">{{ $t('table.search') }}</el-button>

      <el-button v-waves class="filter-item" type="success" icon="el-icon-plus">
        <router-link :to="{name:'pian-edit',params:null}" class="link">新增</router-link>
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="listData"
      :row-class-name="tableRowClassName"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange">
      <el-table-column label="影厅" prop="ting_name" align="center"/>
      <el-table-column label="片名" prop="film_name" align="center"/>
      <el-table-column sortable="custom" label="播放时间" prop="play_time" align="center"/>
      <el-table-column label="创建时间" prop="create_time" align="center"/>
      <el-table-column label="更新时间" prop="update_time" align="center"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="160">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="deleteFilmClicked(scope.$index,scope.row)">删除</el-button>
          <router-link :to="{name:'pian-edit',params:scope.row}" class="link-type">
            <span>编辑</span>
          </router-link>
          <router-link :to="{name:'pian-buy',params:scope.row}" class="link-type">
            <span>购票</span>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="loadDataList" />

  </div>
</template>

<script>
import { fetchList, deleteById } from '@/api/pian'
import { getById as getFilmById } from '@/api/film'
import moment from 'moment'
import waves from '@/directive/waves' // Waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'PianList',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: false,
      dialogTableVisible: false,
      listData: [
      ],
      listQuery: {
        page: 1,
        limit: 10,
        order: 'ascending',
        play_time_arr: []
      },
      total: 0,
      form: {
        ting_name: ''
      },
      rules: {
        film_name: [
          { required: true, message: '请输入片名', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
      formName: '新增影片',
      isAdd: true,
      editIndex: 0
    }
  },
  created() {
    this.loadDataList()
    //    getFilmById({id:'7Wj3pmsBR0WeEofSjChl'}).then(response => {
    //      console.info(response.data.data)
    //    })
  },
  methods: {

    tableRowClassName({ row, rowIndex }) {
      const nowTime = new Date().getTime()
      const playTime = new Date(row.play_time).getTime()

      if (playTime - nowTime < 0) {
        return 'success-row'
      }
      return ''
    },

    sortChange(column, prop, order) {
      // 点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据

      console.log(column + '---' + column.prop + '---' + column.order)

      if (column.prop == null) {
        this.listQuery.order = 'descending'
      }

      this.listQuery.prop = column.prop
      this.listQuery.order = column.order
      console.info(122222)

      this.loadDataList()

      // 输出的结果 [object Object]---name---ascending
    },

    // 获取影片信息
    getFilmInfo() {
      for (const i in this.listData) {
        const obj = this.listData[i]
        if (obj.film_id) {
          getFilmById({ id: obj.film_id }).then(response => {
            obj.film_name = response.data.data.film_name
          })
        }
      }
    },

    // 时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },

    // 打开新增影片弹出框
    toShowDiaLogClicked() {
      this.dialogTableVisible = true
      this.formName = '新增影片'
      this.isAdd = true
    },

    // 删除影片
    deleteFilmClicked(index, row) {
      this.listLoading = true
      deleteById(row).then(response => {
        this.listLoading = false
        this.loadDataList()
      })
    },

    // 格式化日期
    getNowYyyyMMdd() {
      var d = new Date()
      var curr_date = d.getDate()
      var curr_month = d.getMonth() + 1
      var curr_year = d.getFullYear()
      String(curr_month).length < 2 ? (curr_month = '0' + curr_month) : curr_month
      String(curr_date).length < 2 ? (curr_date = '0' + curr_date) : curr_date
      var yyyyMMdd = curr_year + '-' + curr_month + '-' + curr_date
      return yyyyMMdd
    },

    /**
       * 加载列表数据
       * @param rest
       */
    loadDataList(rest) {
      if (rest === true) {
        this.listQuery.page = 1
      }

      this.listLoading = true
      console.info(JSON.stringify(this.listQuery))
      if (this.listQuery.play_time_arr != null || this.listQuery.play_time_arr !== undefined) {
        let startTime = ''
        let endTime = ''
        if (this.listQuery.play_time_arr.length === 0) {
          startTime = new Date(`${this.getNowYyyyMMdd()} 00:00:00`).getTime()
          endTime = new Date(`${this.getNowYyyyMMdd()} 23:59:59`).getTime()
        } else {
          startTime = new Date(`${this.listQuery.play_time_arr[0]} 00:00:00`).getTime()
          endTime = new Date(`${this.listQuery.play_time_arr[1]} 23:59:59`).getTime()
        }

        this.listQuery.start_time = startTime
        this.listQuery.end_time = endTime
        console.info(this.listQuery.start_time)
        console.info(this.listQuery.end_time)
      }
      fetchList(this.listQuery).then(response => {
        const arr = []
        for (const i in response.data.data.list) {
          const item = response.data.data.list[i]
          //                        if (item.play_time){
          item.play_time = parseTime(item.play_time)
          arr.push(item)
        }

        this.listData = arr
        this.total = response.data.data.total
        this.listLoading = false
      })
    }
  }
}

</script>

<style lang="css">
  .search-row{
    padding: 10px 0px;
  }

  .el-table .success-row {
    background: rgba(255, 151, 146, 0.26);
  }
</style>

<template>
  <div class="app-container">

    <div class="filter-container">

      <el-date-picker
        v-model="listQuery.play_time_arr"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="播发开始日期"
        end-placeholder="播发结束日期"
        placeholder="选择播放时间">
      </el-date-picker>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="loadDataList(true)">{{ $t('table.search') }}</el-button>

      <el-button v-waves class="filter-item" type="success" icon="el-icon-plus">
        <router-link class="link" :to="{name:'pian-edit',params:null}">新增</router-link>
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="listData"
      @sort-change="sortChange"
      :row-class-name="tableRowClassName"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column label="影厅" prop="ting_name" align="center"/>
      <el-table-column label="片名" prop="film_name" align="center"/>
      <el-table-column sortable="custom" label="播放时间" prop="play_time" align="center"/>
      <el-table-column label="创建时间" prop="create_time" align="center"/>
      <el-table-column label="更新时间" prop="update_time" align="center"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="160">
        <template slot-scope="scope">
          <el-button
            @click="deleteFilmClicked(scope.$index,scope.row)"
            type="text"
            size="small">删除</el-button>
          <router-link :to="{name:'pian-edit',params:scope.row}" class="link-type">
            <span>编辑</span>
          </router-link>
          <router-link :to="{name:'pian-buy',params:scope.row}" class="link-type">
            <span>购票</span>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0"  :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="loadDataList" />

  </div>
</template>

<script>
  import {fetchList,update,deleteById,add} from '@/api/pian'
  import {getById as getFilmById} from '@/api/film'
  import moment from 'moment'
  import waves from '@/directive/waves' // Waves directive
  import { parseTime } from '@/utils'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  import Vue from 'vue'
  export default {
    name: 'pianList',
    components: { Pagination },
    directives: { waves },
    data() {
      return {
        listLoading:false,
        dialogTableVisible:false,
        listData:[
        ],
        listQuery:{
          page:1,
          limit: 10,
          order:'ascending',
          play_time_arr: []
        },
        total:0,
        form: {
          ting_name:''
        },
        rules: {
          film_name: [
            { required: true, message: '请输入片名', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ]
        },
        formName:'新增影片',
        isAdd:true,
        editIndex:0
      }
    },
    created() {
      this.loadDataList()

//    getFilmById({id:'7Wj3pmsBR0WeEofSjChl'}).then(response => {
//      console.info(response.data.data)
//    })

    },
    methods: {

      tableRowClassName({row, rowIndex}) {
        let nowTime = new Date().getTime()
        let playTime = new Date(row.play_time).getTime()

        if (playTime - nowTime < 0){
          return 'success-row';
        }
        return ''
      },

      sortChange(column, prop, order) {

        //点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据

        console.log(column + '---' + column.prop + '---' + column.order)

        if (column.prop == null) {
          this.listQuery.order = 'descending'
        }

        this.listQuery.prop = column.prop;
        this.listQuery.order = column.order
        console.info(122222)

        this.loadDataList()

        //输出的结果 [object Object]---name---ascending

      },

      //获取影片信息
      getFilmInfo (){
        for (let i in this.listData){
          let obj = this.listData[i]
          if (obj.film_id){
            getFilmById({id:obj.film_id}).then(response => {
              obj.film_name = response.data.data.film_name
            })
          }
        }
      },

      // 时间格式化
      dateFormat: function(row, column) {
        var date = row[column.property]
        if (date === undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      },

      //打开新增影片弹出框
      toShowDiaLogClicked (){
        this.dialogTableVisible = true
        this.formName = '新增影片'
        this.isAdd = true
      },

      //删除影片
      deleteFilmClicked (index,row){
        this.listLoading = true
        deleteById(row).then(response => {
          this.listLoading = false
          this.loadDataList()
        })
      },

      //格式化日期
      getNowYyyyMMdd (){
        var d = new Date();
        var curr_date = d.getDate();
        var curr_month = d.getMonth() + 1;
        var curr_year = d.getFullYear();
        String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
        String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
        var yyyyMMdd = curr_year + "-" + curr_month +"-"+ curr_date;
        return yyyyMMdd;
      },

      /**
       * 加载列表数据
       * @param rest
       */
      loadDataList(rest) {
        if (rest === true) {
          this.listQuery.page = 1
        }

        this.listLoading = true
        console.info(JSON.stringify(this.listQuery))
        if (this.listQuery.play_time_arr != null || this.listQuery.play_time_arr != undefined){
          let startTime = ''
          let endTime = ''
          if (this.listQuery.play_time_arr.length == 0 ){
            startTime = new Date(`${this.getNowYyyyMMdd()} 00:00:00`).getTime()
            endTime = new Date(`${this.getNowYyyyMMdd()} 23:59:59`).getTime()
          }else{
            startTime  = new Date(`${this.listQuery.play_time_arr[0]} 00:00:00`).getTime()
            endTime  = new Date(`${this.listQuery.play_time_arr[1]} 23:59:59`).getTime()
          }

          this.listQuery.start_time = startTime
          this.listQuery.end_time = endTime
          console.info(this.listQuery.start_time)
          console.info(this.listQuery.end_time)
        }
        fetchList(this.listQuery).then(response => {

          let arr = []
          for (let i in response.data.data.list){
            let item = response.data.data.list[i]
//                        if (item.play_time){
            item.play_time = parseTime(item.play_time)
            arr.push(item)
          }

          this.listData = arr
          this.total = response.data.data.total
          this.listLoading = false
        })
      }
    }
  }

</script>

<style lang="css">
  .search-row{
    padding: 10px 0px;
  }

  .el-table .success-row {
    background: rgba(255, 151, 146, 0.26);
  }
</style>

